<template>
    <div style="display: flex">
        <div style="width: 70%">
            <el-table
                    height="550"
                    :data="clockRecords"
                    :default-sort="{prop:'cnt',order:'descending'}"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="clock">
                        <el-timeline v-if="clock.row.clockIn!==null && clock.row.clockIn.length>0">
                            <el-timeline-item
                                    v-for="(activity, index) in clock.row.clockIn"
                                    :key="index"
                                    :type="handleType(index)"
                                    size="large"
                                    :timestamp="activity.dt+' '+activity.dtt">
                                <span style="color: rgba(256,256,256,.7)">{{activity.way +'-'+ activity.commute}}</span>
                            </el-timeline-item>
                        </el-timeline>
                        <span v-else style="text-align: center">暂无打卡记录</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="姓名"
                        prop="name"
                        width="150">
                </el-table-column>
                <el-table-column
                        label="学院名"
                        prop="dept"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="专业班级"
                        prop="major"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="联系电话"
                        prop="phone"
                        width="150"
                >
                </el-table-column>
                <el-table-column label="打卡次数" width="120" sortable prop="cnt">
                </el-table-column>
                <el-table-column>
                    <template slot-scope="clock">
                        <i v-if="clock.row.clockIn!==null && clock.row.clockIn.length>0" class="fa fa-check-circle" style="color: #00ce00"></i>
                        <i v-else class="fa fa-circle-o" style="color: red"></i>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="margin-left: 20px;width: 200px">
            <el-date-picker
                    style="width: 200px"
                    v-model="dt"
                    align="right"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    type="date"
                    @change="handleClick"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
            </el-date-picker>
            <el-button size="small" style="margin-top: 20px" type="success" @click="handleClick">查询</el-button>
        </div>
    </div>
</template>

<script>
    const url = '/clock/records/'
    export default {
        name: "RecordTable",
        data(){
            return{
                clockRecords:[],
                dt:'',
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            }
        },
        mounted() {
            this.initClockRecords()
        },
        methods:{
            handleClick(){
                this.initClockRecords()
                this.$notify({
                    title: '成功',
                    message: "查询成功！",
                    type: 'success'
                });
            },
            initClockRecords(){
                if (this.dt===''){
                    let date = new Date()
                    let m = date.getMonth()+1
                    if(m<10){
                        m='0'+m
                    }
                    let d = date.getDate()
                    if(d<10){
                        d='0'+d
                    }
                    this.dt = date.getFullYear()+'-'+m+'-'+d
                }
                this.getRequest(url+'?day='+this.dt).then(resp=>{
                    if(resp){
                        let list = []
                        for(let c of resp){
                            c.cnt = this.formatter(c)
                            list.push(c)
                        }
                        this.clockRecords = list;
                    }
                })
            },
            handleType(index){
                if(index%2===0){
                    return "success"
                }else{
                    return "danger"
                }
            },
            formatter(row){
                return row.clockIn.length
            }
        }
    }
</script>

<style scoped>
    /* 用来设置当前页面element全局table 选中某行时的背景色*/
    /deep/ .el-table__body tr.current-row>td{
        background-color: rgba(35,29,37,.9) !important;
        /* color: #f19944; */  /* 设置文字颜色，可以选择不设置 */
    }
    /deep/ .el-table, /deep/ .el-table__expanded-cell {
        background-color: rgba(35,29,37,.26);
    }
    /deep/ .el-table th, /deep/ .el-table tr, /deep/ .el-table td{
        background-color: rgba(35,29,37,.26);
    }
    /deep/ .el-table--enable-row-transition, /deep/ .el-table__body td, /deep/ .el-table .cell{
        background-color: rgba(35,29,37,.1);;
    }
    /deep/ .el-table .cell{
        color: rgba(256, 256, 256, 0.78);
    }
</style>